<template>
	<view class="work-order-container">
		<!-- 顶部导航栏 -->
		<view class="page-header">
			<view class="header-content">
				<text class="header-title">工作中心: {{ workCenterName }}</text>
			</view>

			<view class="search-container">
				<view class="search-box">
					<text class="search-icon">🔍</text>
					<input type="text" v-model="searchKeyword" class="search-input" placeholder="搜索生产工单编号"
						@input="handleSearchInput" @confirm="performSearch">
					<text class="clear-btn" v-if="searchKeyword" @click="clearSearch">×</text>
				</view>
			</view>
		</view>
		<tm-message ref="toast"></tm-message>
		<!-- 加载状态 -->
		<view class="loading-view" v-if="isLoading">
			<view class="spinner"></view>
			<text class="loading-text">加载任务单数据中...</text>
		</view>

		<view class="report-modal" v-if="showReportModal">
			<view class="modal-mask" @click="closeReportModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">填写报工数量</text>
					<text class="modal-close" @click="closeReportModal">×</text>
				</view>

				<view class="modal-body">
					<!-- 任务单信息 -->
					<view class="modal-info">
						<text class="info-text">{{ currentOrder.material_idObject
.name }}</text>
						<text class="info-subtext">计划数量: {{ currentOrder.production_quantity }} 件</text>
					</view>

					<view class="select-group">
						<text class="select-label">工序</text>
						<view class="select-wrapper">
							<picker mode="selector" :range="processList" :range-key="'name'"
								v-model="selectedProcessIndex" @change="handleProcessChange">
								<view class="picker-view">
									<text v-if="selectedProcess">{{ selectedProcess.name }}</text>
									<text v-else class="picker-placeholder">请选择工序</text>
								</view>
							</picker>
						</view>
						<text class="error-hint" v-if="processError">{{ processError }}</text>
					</view>

					<view class="select-group">
						<text class="select-label">操作人 *</text>
						<view class="select-wrapper">
							<picker mode="selector" :range="operatorList" :range-key="'real_name'"
								v-model="selectedOperatorIndex" @change="handleOperatorChange">
								<view class="picker-view">
									<text v-if="selectedOperator">{{ selectedOperator.real_name }}</text>
									<text v-else class="picker-placeholder">请选择操作人</text>
								</view>
							</picker>
						</view>
						<text class="error-hint" v-if="operatorError">{{ operatorError }}</text>
					</view>

					<!-- 数量输入 -->
					<view class="input-group">
						<text class="input-label">合格数量 *</text>
						<view class="input-wrapper">
							<input type="number" v-model="qualifiedQuantity" class="quantity-input"
								placeholder="请输入合格数量" @input="validateInput" ref="focusInput">
							<text class="input-unit">件</text>
						</view>
						<text class="error-hint" v-if="qualifiedError">{{ qualifiedError }}</text>
					</view>

					<view class="input-group">
						<text class="input-label">不合格数量</text>
						<view class="input-wrapper">
							<input type="number" v-model="unqualifiedQuantity" class="quantity-input"
								placeholder="请输入不合格数量" @input="validateInput">
							<text class="input-unit">件</text>
						</view>
					</view>

					<view class="total-row" v-if="totalQuantity > 0">
						<text class="total-label">合计数量:</text>
						<text class="total-value">{{ totalQuantity }} 件</text>
						<text class="total-warning" v-if="totalExceed">（超过计划数量）</text>
					</view>
				</view>

				<view class="modal-footer">
					<button class="submit-btn" :disabled="!canSubmit || isSubmitting" @click="submitReport">
						<template v-if="!isSubmitting">确认报工</template>
						<template v-if="isSubmitting">
							<view class="btn-spinner"></view>
							<text>提交中...</text>
						</template>
					</button>
				</view>
			</view>
			
		</view>
		
		<!-- 报工成功提示 -->
		<view class="success-toast" v-if="showSuccess">
			<text class="toast-icon">✓</text>
			<text class="toast-text">报工成功</text>
		</view>

		<!-- 空状态 -->
		<!-- 空状态（无搜索结果或无数据） -->
		<view class="empty-view" v-if="!isLoading && workOrders.length === 0">
			<text class="empty-icon">📋</text>
			<text class="empty-text">
				{{ searchKeyword ? '未找到匹配的任务单' : '当前工作中心暂无任务单' }}
			</text>
			<button class="reset-btn" v-if="searchKeyword" @click="clearSearch">
				清除搜索
			</button>
		</view>
		<!-- 任务单列表 -->
		<view class="order-list" v-if="!isLoading && workOrders.length > 0">
			<view class="order-item" v-for="(order, index) in workOrders" :key="index" @click="selectOrder(index)"
				:class="{ 'order-item--selected': selectedIndex === index }">
				<!-- 任务单信息 -->
				<view class="order-info">
					<view class="order-row">
						<text class="label">生产工单编号:</text>
						<text class="value">{{ order.production_order_code }}</text>
					</view>
					<view class="order-row">
						<text class="label">产成品:</text>
						<text class="value">{{ order.material_idObject && order.material_idObject.name }}</text>
					</view>

					<view class="order-row">
						<text class="label">计划生产数量:</text>
						<text class="value">{{ order.production_quantity }}</text>
					</view>
					<view class="order-row">
						<text class="label">开始日期:</text>
						<text class="value">{{ order.start_time }}</text>
					</view>

					<view class="order-row">
						<text class="label">报合格数:</text>
						<text class="value">{{ order.report_qualified_quantity }}</text>
					</view>

					<view class="order-row">
						<text class="label">报不合格数:</text>
						<text class="value">{{ order.report_unqualified_quantity }}</text>
					</view>

				</view>

				<!-- 选中状态指示 -->
				<view class="order-select" v-if="selectedIndex === index">
					<text class="select-icon">✓</text>
				</view>
			</view>
		</view>

		<!-- 底部报工按钮 -->
		<view class="bottom-bar" v-if="workOrders.length > 0">
			<button class="report-btn" :disabled="selectedIndex === null" @click="openReportModal">
				手动报工
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 工作中心ID（从上个页面接收）
				centerId: '',
				// 工作中心名称
				workCenterName: '',
				// 任务单列表数据
				workOrders: [],
				// 搜索相关
				searchKeyword: '', // 搜索关键词
				searchTimer: null, // 搜索防抖定时器
				processList: [], // 工序列表
				operatorList: [], // 操作人列表
				selectedProcessIndex: -1, // 选中的工序索引
				selectedOperatorIndex: -1, // 选中的操作人索引
				selectedProcess: null, // 选中的工序对象
				selectedOperator: null, // 选中的操作人对象
				processError: '', // 工序选择错误提示
				operatorError: '', // 操作人选择错误提示
				// 选中的任务单索引
				selectedIndex: null,
				showReportModal: false,
				currentOrder: null,
				qualifiedQuantity: '',
				unqualifiedQuantity: '0',
				qualifiedError: '',
				totalExceed: false,
				canSubmit: false,
				// 提交状态
				isSubmitting: false,
				showSuccess: false,
				// 加载状态
				isLoading: true,
				isLoadingData: false,
				taskCode: '', //任务单编号
				taskCodeGx: ""
			};
		},
		computed: {
			// 计算合计数量
			totalQuantity() {
				const qualified = parseInt(this.qualifiedQuantity) || 0;
				const unqualified = parseInt(this.unqualifiedQuantity) || 0;
				return qualified + unqualified;
			}
		},
		created() {
			if(uni.getStorageSync('info')){
				this.selectedOperator = uni.getStorageSync('info')
				this.selectedOperator.real_name = uni.getStorageSync('info').realName
			}
		},
		onLoad(options) {
			const data = JSON.parse(options.centerData)
			// 接收从工作中心页面传递的参数
			if (data.id) {
				this.centerId = data.id;
				this.workCenterName = data.name || '未知';
				// 根据工作中心ID请求任务单数据
				this.fetchWorkOrders();
			} else {
				this.$nextTick(() => {
					this.$refs.toast.show({
						model: 'error',
						label: '无法请求数据'
					})
				})
				this.isLoading = false;
			}
		},

		methods: {


			// 处理搜索输入（带防抖）
			handleSearchInput() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}

				// 300ms防抖，避免输入过程中频繁请求
				this.searchTimer = setTimeout(() => {
					this.performSearch();
				}, 300);
			},



			// 执行搜索（回车触发）
			performSearch() {
				this.selectedIndex = null;
				this.fetchWorkOrders();
				// 收起键盘
				uni.hideKeyboard();
			},
			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
				this.selectedIndex = null;
				this.fetchWorkOrders(); // 重新加载全部数据
			},
			// 验证输入
			validateInput() {
				this.qualifiedError = '';
				this.totalExceed = false;
				this.canSubmit = false;

				const qualified = parseInt(this.qualifiedQuantity) || 0;
				const unqualified = parseInt(this.unqualifiedQuantity) || 0;

				// 验证合格数量
				if (isNaN(qualified) || qualified <= 0) {
					this.qualifiedError = '合格数量必须大于0';
					return;
				}

				// 验证合计数量
				if (qualified + unqualified > this.currentOrder.planQuantity) {
					this.totalExceed = true;
					return;
				}

				// 验证通过
				this.canSubmit = true;
			},

			// 提交报工
			async submitReport() {
				if (!this.canSubmit || !this.currentOrder) return;
				var that = this
				this.isSubmitting = true;
				// 构造报工数据
				const reportData = {
					taskOrderId: this.currentOrder.id,
					processId: this.selectedProcess?.process_id,
					qualifiedQuantity: parseInt(this.qualifiedQuantity),
					unqualifiedQuantity: parseInt(this.unqualifiedQuantity),
					reportUserId: this.selectedOperator.id
				};

				try {
					const res = await uni.$tm.request.post(
						'/custom/order/taskOrder/report',
						reportData
					);
					if (res.code === 0) {
						// 报工成功处理
						this.$nextTick(() => {
							this.$refs.toast.show({
								model: 'success',
								label: '报工成功'
							})
						})
					} else {
						this.$nextTick(() => {
							this.$refs.toast.show({
								model: 'error',
								label: res.msg
							})
						})
					}
					// 关闭弹窗并重置状态
					this.closeReportModal();
				} catch {
					this.$nextTick(() => {
						this.$refs.toast.show({
							model: 'error',
							label: '请联系管理员'
						})
					})
				} finally {
					// 无论成功失败，都结束提交状态
					this.isSubmitting = false;
				}

			},
			getAllData() {
				var that = this
				// 弹窗打开后让合格数量输入框获取焦点
				this.isLoadingData = true;
				Promise.all([
					this.fetchProcessData(this.currentOrder.id), // 根据任务单ID获取工序
					this.fetchOperatorData() // 获取操作人列表
				]).then(([processData, operatorData]) => {
					this.processList = processData;
					this.operatorList = operatorData;
				}).catch(err => {
					that.$nextTick(() => {
						that.$refs.toast.show({
							model: 'error',
							label: '数据加载失败'
						})
					})

				}).finally(() => {
					this.isLoadingData = false;
				});
			},
			openReportModal() {
				if (this.selectedIndex === null) return;
				this.currentOrder = this.workOrders[this.selectedIndex]
				this.showReportModal = true;
				// 弹窗打开后让合格数量输入框获取焦点
				this.getAllData()
			},
			// 重置报工表单

			// 获取工序数据
			async fetchProcessData(orderId) {

				const res = await uni.$tm.request.post('app/production/form/task_order_process/page', {
					"keyword": "",
					"condition": [{
						"fieldName": "task_id",
						"connect": "OR",
						"type": "eq",
						"value": orderId,
						"other": true
					}],
					"_is_deleted_": false,
					"page": 1,
					"limit": 50,
					"order": "desc"
				})
				if (res.code === 0 && res.data && res.data.list) {
					res.data.list.map(itm => {
						return itm.name = itm.process_idObject.name + " (" + itm.process_idObject
							.code + ")"
					})
					return res.data.list;
				} else {
					return []
				}
			},
			// 获取操作人数据
			async fetchOperatorData() {
				// 模拟API请求
				const res = await uni.$tm.request.post('app/sys/form/user/page', {
					"keyword": "",
					"condition": [],
					"_is_deleted_": false,
					"page": 1,
					"limit": 999,
					"order": "desc"
				})
				if (res.code === 0 && res.data && res.data.list) {
					return res.data.list;
				} else {
					return []
				}
			},
			// 工序选择变化
			handleProcessChange(e) {
				const index = e.detail.value;
				this.selectedProcessIndex = index;
				this.selectedProcess = this.processList[index];
				this.validateInput(); // 重新验证
			},

			// 操作人选择变化
			handleOperatorChange(e) {
				const index = e.detail.value;
				this.selectedOperatorIndex = index;
				this.selectedOperator = this.operatorList[index];
				this.validateInput(); // 重新验证
			},

			// 验证输入
			validateInput() {
				// 重置错误提示
				this.processError = '';
				this.operatorError = '';
				this.qualifiedError = '';
				this.totalExceed = false;
				this.canSubmit = false;

				// 2. 验证操作人选择
				if (!this.selectedOperator) {
					this.operatorError = '请选择操作人';
					return;
				}

				// 3. 验证合格数量
				const qualified = parseInt(this.qualifiedQuantity) || 0;
				if (isNaN(qualified) || qualified <= 0) {
					this.qualifiedError = '合格数量必须大于0';
					return;
				}

				// 4. 验证合计数量
				const unqualified = parseInt(this.unqualifiedQuantity) || 0;
				if (qualified + unqualified > this.currentOrder.planQuantity) {
					this.totalExceed = true;
					return;
				}

				// 所有验证通过
				this.canSubmit = true;
			},
			// 关闭报工弹窗
			closeReportModal() {
				this.selectedIndex = null
				this.currentOrder = null
				this.qualifiedQuantity = ''
				this.unqualifiedQuantity = '0'
				this.qualifiedError = ''
				this.totalExceed = false
				this.canSubmit = false
				this.selectedProcess = null
				this.showReportModal = false;
				this.selectedOperatorIndex = -1;
				this.processList = [];
				this.operatorList = [];
				this.taskCode = ""
				this.taskCodeGx = ""
				this.fetchWorkOrders()
			},
			/**
			 * 根据工作中心ID请求任务单数据
			 */
			async fetchWorkOrders() {
				this.isLoading = true;
				try {
					const res = await uni.$tm.request.post('app/production/form/task_order/page', {
						"keyword": this.searchKeyword.trim(),
						"condition": [{
							"connect": "OR",
							"fieldName": "working_center_id",
							"type": "eq",
							"value": this.centerId
						}],
						"_is_deleted_": false,
						"page": 1,
						"limit": 50,
						"order": "desc"
					})
					if (res.code === 0 && res.data) {
						this.workOrders = res.data.list || [];
					} else {
						this.$nextTick(() => {
							this.$refs.toast.show({
								model: 'error',
								label: '数据加载失败'
							})
						})
						this.workOrders = [];
					}
				} catch (error) {
					this.$nextTick(() => {
						this.$refs.toast.show({
							model: 'error',
							label: '网络异常'
						})
					})
					this.workOrders = [];
				} finally {
					this.isLoading = false;
				}
			},

			/**
			 * 选择任务单
			 */
			selectOrder(index) {
				this.selectedIndex = index;
			},
		}
	};
</script>

<style scoped>
	.search-container {
		margin-top: 12px;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f7fa;
		border-radius: 8px;
		padding: 0 12px;
		height: 40px;
	}

	.search-icon {
		color: #94a3b8;
		font-size: 16px;
		margin-right: 8px;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 14px;
		background: transparent;
		border: none;
		outline: none;
	}

	.clear-btn {
		color: #94a3b8;
		font-size: 16px;
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	/* 空状态重置按钮 */
	.reset-btn {
		margin-top: 16px;
		padding: 8px 16px;
		background-color: #3b82f6;
		color: #ffffff;
		border: none;
		border-radius: 8px;
		font-size: 14px;
	}

	.select-group {
		margin-bottom: 16px;
	}

	.select-label {
		font-size: 14px;
		color: #475569;
		display: block;
		margin-bottom: 8px;
	}

	.select-wrapper {
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		overflow: hidden;
	}

	.picker-view {
		padding: 0 12px;
		height: 44px;
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #1e293b;
	}

	.picker-placeholder {
		color: #94a3b8;
	}

	/* 页面容器 */
	.work-order-container {
		min-height: 100vh;
		padding-bottom: 80px;
		box-sizing: border-box;
		background-color: #f5f7fa;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 顶部导航 */
	.page-header {
		padding: 20px 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
		display: block;
	}

	.header-subtitle {
		font-size: 14px;
		color: #64748b;
		margin-top: 6px;
		display: block;
	}

	/* 加载状态 */
	.loading-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 20px;
	}

	.spinner {
		width: 30px;
		height: 30px;
		border: 3px solid #e2e8f0;
		border-top-color: #3b82f6;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	.loading-text {
		font-size: 14px;
		color: #64748b;
		margin-top: 15px;
	}

	/* 空状态 */
	.empty-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80px 20px;
		text-align: center;
	}

	/* 空状态和加载状态 */
	.empty-view,
	.loading-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 20px;
		text-align: center;
	}

	.empty-icon {
		font-size: 48px;
		margin-bottom: 20px;
	}

	.empty-text {
		font-size: 16px;
		color: #64748b;
	}

	/* 任务单列表 */
	.order-list {
		padding: 16px;
	}

	/* 任务单条目 */
	.order-item {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: all 0.3s ease;
	}

	.empty-text,
	.loading-text {
		font-size: 16px;
		color: #64748b;
	}

	.order-item:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.order-item--selected {
		border: 2px solid #3b82f6;
	}

	/* 任务单信息 */
	.order-info {
		flex: 1;
	}

	.order-row {
		display: flex;
		margin-bottom: 8px;
	}

	.order-row:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 14px;
		color: #64748b;
		width: 105px;
	}

	.value {
		font-size: 14px;
		color: #1e293b;
		flex: 1;
		word-break: break-all;
	}

	/* 选中状态指示 */
	.order-select {
		width: 24px;
		height: 24px;
		background-color: #3b82f6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-icon {
		color: #ffffff;
		font-size: 14px;
		font-weight: bold;
	}

	/* 底部按钮栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px;
		background-color: #ffffff;
		border-top: 1px solid #eee;
	}

	/* 报工按钮 */
	.report-btn {
		width: 100%;
		padding: 14px;
		background-color: #3b82f6;
		color: #ffffff;
		border: none;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.report-btn:disabled {
		background-color: #e2e8f0;
		color: #94a3b8;
		cursor: not-allowed;
	}

	.report-btn:not(:disabled):hover {
		background-color: #2563eb;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	}

	.report-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		width: 90%;
		max-width: 360px;
		background-color: #ffffff;
		border-radius: 16px;
		position: relative;
		z-index: 10;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	}

	.modal-header {
		padding: 16px 20px;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
	}

	.modal-close {
		font-size: 20px;
		color: #64748b;
		cursor: pointer;
	}

	.modal-body {
		padding: 10px 20px;
	}

	.modal-info {
		margin-bottom: 10px;
		padding-bottom: 8px;
		border-bottom: 1px solid #f5f5f5;
	}

	.info-text {
		font-size: 16px;
		font-weight: 500;
		color: #1e293b;
		display: block;
		margin-bottom: 4px;
	}

	.info-subtext {
		font-size: 14px;
		color: #64748b;
	}

	/* 弹窗输入样式 */
	.input-group {
		margin-bottom: 16px;
	}

	.input-label {
		font-size: 14px;
		color: #475569;
		display: block;
		margin-bottom: 8px;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		padding: 0 12px;
		height: 44px;
	}

	.input-wrapper:focus-within {
		border-color: #3b82f6;
	}

	.quantity-input {
		flex: 1;
		height: 100%;
		font-size: 16px;
		border: none;
		outline: none;
		padding: 0;
	}

	.input-unit {
		font-size: 16px;
		color: #64748b;
		padding-left: 8px;
	}

	.error-hint {
		font-size: 12px;
		color: #ef4444;
		margin-top: 6px;
		display: block;
	}

	.total-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 6px 0;
	}

	.total-label {
		font-size: 14px;
		color: #64748b;
		margin-right: 8px;
	}

	.total-value {
		font-size: 14px;
		color: #1e293b;
		font-weight: 600;
	}

	.total-warning {
		font-size: 12px;
		color: #ef4444;
		margin-left: 8px;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-footer {
		padding: 16px 20px;
		border-top: 1px solid #f5f5f5;
	}

	.submit-btn {
		width: 100%;
		padding: 14px;
		background-color: #3b82f6;
		color: #ffffff;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn:disabled {
		background-color: #e2e8f0;
		color: #94a3b8;
	}

	.btn-spinner {
		width: 16px;
		height: 16px;
		border: 2px solid #ffffff;
		border-top-color: transparent;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-right: 8px;
	}

	/* 成功提示 */
	.success-toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(16, 185, 129, 0.9);
		color: #ffffff;
		padding: 16px 24px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		z-index: 1000;
		animation: fadeInOut 2s;
	}

	.toast-icon {
		font-size: 20px;
		margin-right: 8px;
	}

	.toast-text {
		font-size: 16px;
		font-weight: 500;
	}

	/* 动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes fadeInOut {
		0% {
			opacity: 0;
		}

		20% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	/* 响应式调整 */
	@media (max-width: 375px) {
		.label {
			width: 80px;
			font-size: 13px;
		}

		.value {
			font-size: 13px;
		}
	}

	/* 动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 适配不同屏幕 */
	@media (max-width: 320px) {
		.label {
			width: 80px;
			font-size: 13px;
		}

		.value {
			font-size: 13px;
		}
	}
</style>